<template>
<ve-histogram :data="chartData" height="400px" :extend="extend"></ve-histogram>
</template>

<script>
import {
    mapGetters
} from 'vuex'
export default {
    name: 'ProbabilityPrediction',
    computed: {
        ...mapGetters({
            modelDetail: 'common/getModelDetail'
        })
    },
    data () {
        return {
            extend: {
                title: {
                    left: '10%',
                    text: '概率预测分布图',
                    textStyle: {
                        color: '#606266',
                        fontSize: 14,
                        fontWeight: 'normal'
                    }
                },
                dataZoom: [{
                    type: 'inside'
                }],
                series: {
                    barMaxWidth: 30,
                    barGap: 0,
                    showSymbol: false
                },
                grid: {
                    left: '100px',
                    right: '100px'
                }
            },
            chartData: {
                columns: [],
                rows: []
            }
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            const rows = this.modelDetail.summary.evaSummary.predictionDistributePlot
            rows.forEach(item => {
                item.p = item.p + ''
            })
            if (rows.length) {
                this.chartData = {
                    columns: Object.keys(rows[0]),
                    rows
                }
            }
        }
    }
}
</script>
